<template>
    <div class="selectGame-wrap">
        <el-select
            :style="{ 'width': width }"
            v-model="name"
            clearable
            filterable
            :filter-method="filterGame"
            :loading="gameLoading"
            @change="gameSelect"
            placeholder="请输入并选择关联游戏">
            <el-option
                v-for="item in gameList"
                :key="item.gameid"
                :label="item.appName"
                :value="item.gameid">
                    <span style="float: left">
                        <span>{{ item.appName }}</span>
                        <span v-if="item.status === -1" style="color:red;font-size:12px;margin:0 5px;">下架</span>
                    </span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.gameid }}</span>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    name: 'selectGame',
    props: {
        gameIndex: {
            type: Number,
            default: 0
        },
        width: {
            type: String,
            default: '220px'
        },
        gameInfo: {
            type: Object,
            default: null
        },
        getGame: {
            type: Function,
            default: null
        }
    },
    data () {
        return {
            name: this.gameInfo.gameName,
            gameList: [],
            gameLoading: false
        }
    },
    watch: {
        gameInfo (val) {
            this.name = this.gameInfo.gameName
        }
    },
    methods: {
        gameSelect (val) {
            if (!val) {
                this.getGame({
                    gameName: '',
                    gameId: ''
                }, this.gameIndex)
                return
            }
            let game = this.gameList.find(item => {
                return item.gameid === val
            })
            this.getGame({
                gameName: game.appName,
                gameId: game.gameid
            }, this.gameIndex)
        },
        async getgameList (keyword) { // 获取游戏列表
            let params = {
                keyword,
                pageIndex: 1,
                pageNum: 100
            }
            let res = await this.$http.post('/home/findGames', params)
            if (res.code === '0') {
                this.gameList = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.gameLoading = false
        },
        filterGame (res) {
            clearTimeout(this.timerId)
            if (!res) {
                this.gameLoading = false
                return
            }
            this.gameLoading = true
            this.timerId = setTimeout(() => {
                this.getgameList(res)
            }, 1000)
        }
    }
}
</script>

<style lang="scss">
    .selectGame-wrap {
        display: inline-block;
        .top-title-com {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            height: 20px;
            font-size: 16px;
            font-weight: 500;
            &::before {
                content: '';
                width: 3px;
                height: 100%;
                margin-right: 8px;
                background-color: #0081ff;
            }
            .tip {
                font-size: 13px;
                font-weight: normal;
                margin-left: 10px;
            }
        }
    }
</style>
